
md-content#issueInformation(
	ng-if="vm.issueData && vm.modelSettings"
	layout="column"
	tabindex="0"
	tdr-focus="true")

	// Title
	.issueItemContainer#issueTitleArea(
		layout="column"
		layout-align="start"
		flex
		ng-class="{issueTitleArea: vm.data}"
		ng-click="vm.toggleShowAdditional()")

			div(layout="row", flex, layout-align="space-between")
				div(layout="row", flex)
					#issueRoleIndicator(ng-style="{backgroundColor: vm.issueData.issueRoleColor}")

					div(ng-if="!vm.data"
						layout="column"
						flex)
						md-input-container#issueTitleInput(
							style="width=100%;"
							flex
							md-no-float)

							input(
								flex
								type="text"
								ng-model="vm.issueData.name"
								ng-change="vm.nameChange()"
								ng-disabled="vm.data"
								ng-focus="vm.textInputHasFocus(true)"
								ng-blur="vm.textInputHasFocus(false)"
								aria-label="Title"
								tdr-focus="true"
								required
								placeholder="Title",
								ng-click="vm.titleInputClick($event)")

					label#issueTitle(ng-if="vm.data") {{vm.issueData.title}}

				span(flex="5")
				div
					md-button.md-icon-button#additionalInfoButton(aria-label="Status Toggle")
						md-icon.angular-material-icons(ng-if="!vm.showAdditional") keyboard_arrow_right
						md-icon.angular-material-icons(ng-if="vm.showAdditional") keyboard_arrow_down
					md-tooltip(ng-if="!vm.showAdditional") Show additional information
					md-tooltip(ng-if="vm.showAdditional") Hide additional information

	// Info
	.issueItemContainer#issueInfoArea(layout="row", layout-align="start center", flex="none", ng-if="vm.showAdditional")
		div(flex="10")
			md-icon.angular-material-icons#issueStatusIcon(
				style="color:{{vm.issueData.statusIcon.colour}}") {{vm.issueData.statusIcon.icon}}

		.issueIssueOwner(ng-if="vm.data", layout="row", layout-align="space-between", flex)
			label {{vm.data.owner}}
			label {{vm.data.created | prettyDate}}

	// Status
	.issueItemContainer#issueAdditional(layout="column", ng-if="vm.showAdditional")
		div(layout="row")
			md-input-container.issueItemStatus(flex)
				label Priority
				md-select(
					id="issuePriority"
					ng-model="vm.issueData.priority"
					ng-change="vm.statusChange()"
					ng-disabled="!vm.canChangePriority()")

					md-option(ng-repeat="priority in vm.priorities", value="{{priority.value}}") {{priority.label}}

			md-input-container.issueItemStatus(flex)
				label Status
				md-select(
					id="issueStatus"
					ng-model="vm.issueData.status"
					ng-change="vm.statusChange()"
					ng-disabled="!vm.canChangeStatus()")

					md-option(
						ng-repeat="status in vm.statuses"
						ng-disabled="vm.disableStatusOption(status)"
						value="{{status.value}}") {{status.label}}

		div(layout="row")
			md-input-container(flex)
				label Assign
				md-select(
					id="issueAssign"
					ng-model="vm.issueData.assigned_roles[0]"
					ng-change="vm.statusChange()"
					ng-disabled="!vm.canChangeAssigned()")

					md-option(ng-repeat="job in vm.modelJobs", value="{{job}}") {{job}}

			md-input-container(flex)
				label Type
				md-select(
					id="issueType"
					ng-model="vm.issueData.topic_type"
					ng-change="vm.statusChange()"
					ng-disabled="!vm.canChangeType()")

					md-option(ng-repeat="type in vm.topic_types", value="{{type.value}}") {{type.label}}

		div(layout="row")
			md-input-container(flex)
				label Due Date
				md-datepicker(
					flex="50"
					id="issueDueDate"
					ng-model="vm.issueData.due_date"
					ng-change="vm.statusChange()"
					ng-disabled="!vm.canChangeDueDate()"
					md-hide-icons="calendar"
					md-date-locale="locale")

		.issueOrthogonalViewIssue(layout="row" ng-if="vm.issueData.viewpoint.type === 'orthogonal'")
			p Orthogonal view: objects in the viewer are shown in perspective projection.

	.issueItemContainer#issueDescriptionContainer(layout="column", layout-align="start", flex)
		div(layout="column", layout-align="start", flex)
			div(ng-if="!vm.data", flex, layout="column")
				md-input-container#descriptionText()
					label Description
					textarea(
						ng-model="vm.issueData.desc"
						ng-disabled="vm.data"
						ng-focus="vm.textInputHasFocus(true)"
						ng-blur="vm.textInputHasFocus(false)")

			#issueDescription(
				ng-if="vm.data"
				layout="column"
				ng-click="vm.showViewpoint($event, vm.issueData.viewpoint)")

				div(layout='row', layout-align="space-between", flex)
					label(
						ng-if="!vm.editingDescription"
						ng-bind-html="vm.issueData.desc | linky:'_blank':{rel: 'noopener'}") {{vm.issueData.desc}}
					md-input-container(flex, ng-if="vm.editingDescription")
						textarea(
							ng-model="vm.issueData.desc"
							aria-label="Description"
							tdr-focus="true"
							ng-focus="vm.textInputHasFocus(true)"
							ng-blur="vm.textInputHasFocus(false)")

					.issueTextActions(layout="row", ng-if="vm.canChangeDescription()")
						md-button.md-icon-button.md-accent(
							aria-label="Edit Description Toggle"
							ng-click="vm.toggleEditDescription($event)")

							md-tooltip(
								ng-if="!vm.editingDescription"
								md-direction="bottom") Edit Description
							md-icon.angular-material-icons(
								ng-if="!vm.editingDescription"
								style="color:{{vm.editCommentColor}}") mode_edit

							md-tooltip(
								ng-if="vm.editingDescription"
								md-direction="bottom") Save Description
							md-icon.angular-material-icons(
								ng-if="vm.editingDescription"
								style="color:{{vm.editCommentColor}}") save


			.issueThumbnail(
				ng-if="vm.issueData.descriptionThumbnail"
				ng-click="vm.showScreenShot($event, vm.issueData.viewpoint)")
				img.issueThumbnailImage(ng-src="{{vm.issueData.descriptionThumbnail}}")


	#descriptionAndComments(flex, ng-if="vm.issueData.comments.length > 0")
		md-divider

		// Comments
		.issueItemContainer(layout="column", layout-align="start", flex)
			label.issuesLabel Comments
			div(ng-repeat="comment in vm.issueData.comments | orderBy : comment.timeStamp : true"
				layout="column", layout-align="start", flex)
				div(ng-click="vm.showViewpoint($event, comment.viewpoint)"
					layout="column"
					layout-align="start"
					flex
					ng-class="{issueComment: !comment.action}")

					// Text and actions
					div(layout='row', layout-align="space-between", flex)
						// Saved normal comment
						label.issueCommentTitle(
							flex
							ng-if="!comment.editing && !comment.action"
							ng-bind-html="comment.comment | linky:'_blank':{rel: 'noopener'}")
							// Saved auto comment

						// Editing normal comment
						md-input-container.fillHeight(flex, ng-if="comment.editing")
							textarea.fillHeight(
								ng-model="comment.comment"
								flex
								aria-label="Description"
								tdr-focus="true"
								ng-focus="vm.textInputHasFocus(true)"
								ng-blur="vm.textInputHasFocus(false)")

						.issueTextActions(layout="row", ng-if="!comment.sealed && !comment.action", flex="none")
							//md-button.md-icon-button.md-accent(aria-label="Edit Comment", ng-click="vm.toggleEditComment($event, $index)")
								md-tooltip(md-direction="bottom") edit
								md-icon.angular-material-icons(style="color:{{vm.editCommentColor}}") mode_edit
							md-button.md-icon-button.md-accent(aria-label="Delete Comment", ng-click="vm.deleteComment($event, $index)")
								md-tooltip(md-direction="bottom") Delete
								md-icon.angular-material-icons close

					// Info
					.issueCommentOwner(
						ng-if="vm.data && !comment.action"
						layout="row"
						layout-align="space-between"
						flex)

						label {{comment.owner}}
						label {{comment.timeStamp}}

					// Or Auto comment
					.issueCommentTitle(
						ng-if="comment.action"
						flex)

						label {{comment.action.text}}

					.issueCommentOwner(
						ng-if="comment.action"
						layout="row"
						layout-align="space-between"
						flex)

						label.issueNotification Notification
						label {{comment.timeStamp}}

					// Thumbnail
					.issueThumbnail(
						layout="row"
						layout-align="center"
						ng-if="comment.viewpoint.screenshotPath"
						ng-click="vm.showScreenShot($event, comment.viewpoint)"
						flex)
						img.issueThumbnailImage(ng-src="{{comment.viewpoint.screenshotPath}}")

					.issueOrthogonalView(
						layout="row"
						flex
						ng-if="comment.viewpoint.type === 'orthogonal'")
						p Comment saved with orthogonal view

					md-divider


md-divider

.issueItemContainer#issueFooterButtons(layout="column")

	.issueThumbnail.fillHeight(
		layout="row"
		layout-align="center"
		ng-if="vm.commentThumbnail"
		ng-click="vm.showThumbnail()")

		img.issueThumbnailImage(
			id="commentThumbnail"
			ng-src="{{vm.commentThumbnail}}")

	div(layout="row" flex="100")
		// New comment
		.issueItemContainer#issueNewComment(
			layout="row"
			layout-align="start center"
			flex="100"
			ng-if="vm.data")

			textarea(
				flex="100"
				placeholder="{{vm.getCommentPlaceholderText()}}"
				id="newCommentInput"
				aria-label="New Comment"
				ng-model="vm.comment"
				ng-change="vm.commentChange()"
				ng-focus="vm.textInputHasFocus(true)"
				ng-blur="vm.textInputHasFocus(false)"
				ng-disabled="!vm.canComment() || vm.issueFailedToLoad"
				ng-required="true")

		div(layout="row" layout-align="start center")
			md-button.md-icon-button(

				ng-repeat="(action, actionData) in vm.actions"
				id="{{actionData.id + 'CommentButton'}}"
				aria-label="{{action}}"
				ng-click="vm.doAction($event, action)"
				ng-if="actionData.visible()"
				ng-disabled="actionData.disabled()")

				md-tooltip(md-direction="bottom") {{actionData.label}}
				md-icon.angular-material-icons(style="color:{{actionData.selected ? '#FF9800' : ''}}") {{actionData.icon}}

		div(flex="100" ng-if="!vm.data")

		div(layout="row" layout-align="end center")
			md-button.md-fab.md-mini(
				id="submitCommentButton"
				aria-label="Submit"
				ng-disabled="vm.submitDisabled || vm.issueFailedToLoad"
				ng-click="vm.submit()"
				ng-if="!vm.saving")
				md-tooltip(md-direction="bottom") Submit
				md-icon.angular-material-icons save
			md-progress-circular(md-diameter="20px", md-mode="indeterminate" ng-if="vm.saving")

// Whilst issue is loading
div.heightFix(
	ng-if="!vm.modelSettings || !vm.issueData"
	flex
	layout="column"
	layout-fill
	tabindex="0"
	tdr-focus="true")

	tdr-progress(info="vm.issueProgressInfo")

div.heightFix(
	ng-if="vm.issueFailedToLoad"
	flex
	layout="column"
	layout-fill
	tabindex="0"
	tdr-focus="true")

	div(
		layout="column"
		flex
		layout-align="center center")
			h3 Issue Failed to Load
